/**
 * 首页
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { TabBar, AddrView, AddrList } from 'app/components'
import { Title } from '../../components/common'
import * as addressActions from '../../actions/addressActions'

import common from '../../utils/common'
import { Toast } from 'antd-mobile'
import style from './index.scss'


class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            car: {
                carNumberSuffix: "",
                carNumPrefix: "粤A",
                carCode: "",
            },
            tabBar: {
                selectedIndex: 0, // 选中的tab下标
                isFixed: true, // 是否固定在底部
                list: [
                    {
                        pagePath: "test", // 页面跳转路由
                        text: "车辆年检",  // tab文案
                        iconPath: "./images/visaNav.png", //默认图标
                        selectedIconPath: "./images/visaNav_s.png",  // 选中图标
                    },
                    {
                        pagePath: "orderList",
                        text: "我的订单",
                        iconPath: "./images/orderNav.png",
                        selectedIconPath: "./images/orderNav_s.png",
                    },
                ]
            }
        };
    }

    componentWillMount() {
        common.setViewTitle('车辆年检');
    }

    componentDidMount() {
        // 请求默认地址数据
        this.props.addressActions.getDefaultAddressAsync({}, (result) => {
            console.log(result);
        })
    }

    // 地址预览组件点击
    addressClick() {
        this.props.router.push('addressList');
    }

    // tab点击
    tabClick(index) {
        let { tabBar } = this.state;
        let { list } = tabBar;
        console.log(list, index, list[index].pagePath)
        this.props.router.replace(list[index].pagePath);
    }

    render() {
        let { tabBar, car} = this.state;
        let { defaultAddress } = this.props
        let conditions = "1、车辆注册日期在2013-11-10~2017-11-10之间的车辆。\n2、无未处理的交通违法。\n3、限定5座（包含5座）以下的蓝牌车。\n4、有效期内的交强险。\n";
        let { carCode, carNumPrefix, carNumberSuffix} = car;
        return (
            <div>
                {/*顶部说明*/}
                <div className={style.imageText} >
                    <div className={style.image}>
                    </div>
                    <div className={style.text} style={{ fontSize: "0.26rem" }}>
                        <div>新车六年免检服务</div>
                        <div>
                            <img className={style.choiceImg} src="http://yzres.oss-cn-shenzhen.aliyuncs.com/wx/images/common/choice_Btn@3x.png" />
                            邮政速递上门服务,足不出户办理车辆年检
                        </div>
                        <div>
                            <img className={style.choiceImg} src="http://yzres.oss-cn-shenzhen.aliyuncs.com/wx/images/common/choice_Btn@3x.png" />
                            支持广东省内各地市
                        </div>
                    </div>
                </div>
                <div style={{ height: "0.24rem" }}></div>
                {/*办理条件*/}
                <div>
                    <Title text='办理条件' isLine={true} />
                    <div className={style.needRes}>
                        <p className={style.resText}>{conditions}</p>
                    </div>
                </div>
                <div style={{ height: "0.24rem" }}></div>
                {/*车辆信息*/}
                <div>
                    <Title text='车辆信息' isLine={true} />
                    <div className={style.formView} id="carNumberPrefixView">
                        <span className={style.formLabel}>车牌号码</span>
                        <span className={style.prefix}>{carNumPrefix} </span>
                        <input type="text" name="carNumberSuffix" id="carNumberSuffix" defaultValue={carNumberSuffix} className={style.pageForm} onChange={this.carNumberSuffix} style={{ width: "4.26rem!important", paddingLeft: "0.2rem!important" }} placeholder="请输入车牌号码" maxLength="6" />
                    </div>
                    <div className={style.formView} id="carCodeView">
                        <span className={style.formLabel}>车身架号</span>
                        <input type="text" name="carCode" id="carCode" onChange={this.carCode}  defaultValue={carCode} className={style.pageForm} placeholder="请输入车身架号后6位" maxLength="6" />
                    </div>
                </div>
                <div style={{ height: "0.24rem" }}></div>
                {/*地址预览*/}
                <AddrView {...defaultAddress} handleClick={() => this.addressClick()} />
                {/*底部固定tab*/}
                <TabBar {...tabBar} tabClick={(index) => this.tabClick(index)} />
            </div>
        )
    }
}

const mapStateToProps = state => ({
    // addressList: state.addressList,
    defaultAddress: state.defaultAddress,
})

const mapDispatchToProps = dispatch => ({
    addressActions: bindActionCreators(addressActions, dispatch),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Test);

